<template>
    <div> 
        <div class="topbox">
            <div class="firstbox">
                <label for="firstin">详细地址</label>
                <input type="text" placeholder="请填写详细地址" id="firstin" v-model="list.address">
            </div>
             <div class="firstbox">
                <label for="phone">联系方式</label>
                <input type="text" placeholder="请填写手机号码" id="phone" v-model="list.mobile">
            </div>
            <div class="shoptime">
                <span>营业时间</span>
                  <span id="qishitime" @click="firsttime()">{{this.time}}</span>
                  <span>&nbsp;~&nbsp;</span>
                  <span id="endtime" @click="lasttime()">{{this.data}}</span>
            </div>
        </div>
        <div class="boxtext">店铺介绍</div>
        <textarea id="bomarea"  cols="30" rows="10" maxlength="200" placeholder="请输入店铺介绍" v-model="desc" @input="zishu()"></textarea>
         <span style="float:right; margin-right:10px; margin-top:5px;">{{head}}/200</span>

        <template>
        <mt-datetime-picker
            ref="picker"
            type="time"
            @confirm="handleConfirm"
            v-model="pickerValue">
        </mt-datetime-picker>
        </template>

          <template>
        <mt-datetime-picker
            ref="pickerr"
            type="time"
            @confirm="his"
            v-model="pickerValue">
        </mt-datetime-picker>
        </template>

        <div class="bombtn" @click="tijiao()">
            <router-link to >提交</router-link>
        </div>
        
    </div>
</template>

<script>
import { Popup, DatetimePicker } from 'mint-ui';
export default {
     components: {
    [Popup.name]: Popup,
    [DatetimePicker.name]:DatetimePicker,
  },
  data() {
    return{
        list:'',
      pickerValue:'0:00',
      time:'0:00',
      data:'0:00',
      dianpuid:'',
      desc:0,
      head:0
    }
  }, 
  mounted(){
      this.info()
  },
   methods: {
        zishu(){
            var txtVal = this.desc.length;
             this.head = 200 - txtVal;
        },
       info(){
           this.$http.get(this.APIURL_PREFIX+'/api/companyInfo')
        .then((res)=>{
          console.log(res)
          this.list=res.data.data
          this.desc=this.list.slogan
          this.head=200-this.desc.length
          this.dianpuid=this.list.companyId
          this.time=this.list.businessStartTime
          this.data=this.list.businessEndTime
          if(this.time==''||this.data==''){
              this.time='0:00'
              this.data='0:00'
          }
        })
       },
       tijiao(){
        console.log(888)
        var dizhi=$('#firstin').val()
        var phone=$('#phone').val()
        var area=$('#bomarea').val()
        var statustime=$('#qishitime').text()
        var endtime=$('#endtime').text()
        console.log(dizhi,phone,area,statustime,endtime)
           this.$http.put(this.APIURL_PREFIX+'/api/company',$.param({address:dizhi,mobile:phone,businessStartTime:statustime,businessEndTime:endtime,slogan:area,companyId:this.dianpuid}))
        .then((res)=>{
             console.log(res)
             layer.msg('保存成功')
             this.$router.push({name:'me_shop'});
        })

       },
       firsttime(){
        this.openPicker()
       },
       lasttime(){
        this.openPickerr()
       },
       handleConfirm(i){
            console.log(i)
             this.time=i
             console.log(this.time)
       },
       his(i){
             console.log(i)
             this.data=i
       },
        openPickerr() {
            console.log('err')
             this.$refs.pickerr.open();
      },
      openPicker() {
             this.$refs.picker.open();
      }
    }
}
</script>

<style scoped>
@import "../../assets/personal/css/me_shopbianji.css";
</style>
